<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/prop-types.js"></script>
  </head>
  <body>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
	<script type="text/babel">
    //  //1.创建组件
    // class Person extends React.Component{

    // //对标签属性进行类型、必要性的限制
    // static proTypes = {
    //   name:PropTypes.string.isRequired,
    //   sex:PropTypes.string,
    //   age:PropTypes.number,
    //   speak:PropTypes.func
    // }

    // //指定默认标签属性值
    // static defaultProps = {
    //   sex:'男',//sex默认值
    //   age:18//age默认值
    // }

    //   render(){
    //     console.log(this);
    //     const {name,age,sex} = this.props
    //     return (
    //       // <ul>
    //       //   <li>姓名：{this.props.name}</li>
    //       //   <li>性别：{this.props.sex}</li>
    //       //   <li>年龄：{this.props.age}</li>
    //       // </ul>
    //       <ul>
    //         <li>姓名：{name}</li>
    //         <li>性别：{sex}</li>
    //         <li>年龄：{age+1}</li>
    //       </ul>
    //     )
    //   }
    // }

    function Person(props){
      const{name,age,sex} = props
      return (
          // <ul>
          //   <li>姓名：{this.props.name}</li>
          //   <li>性别：{this.props.sex}</li>
          //   <li>年龄：{this.props.age}</li>
          // </ul>
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age+1}</li>
          </ul>
        )

    }

        //对标签属性进行类型、必要性的限制
        Person.propTypes = {
      name:PropTypes.string.isRequired,
      sex:PropTypes.string,
      age:PropTypes.number,
      speak:PropTypes.func
    }

    //指定默认标签属性值
    Person.defaultProps = {
      sex:'男',//sex默认值
      age:18//age默认值
    }



    //渲染组件到页面
    ReactDOM.render(<Person name="tom" speak="speak"/>,document.getElementById('example1'))
    ReactDOM.render(<Person name="may" sex="男" age={19}/>,document.getElementById('example2'))

    const p = {name:"Liu",age:21,sex:"男"}
    console.log('@',...p)
    //ReactDOM.render(<Person name={p.name} sex={p.sex} age={p.sex}/>,document.getElementById('example3'))
    ReactDOM.render(<Person {...p}/>,document.getElementById('example3'))

    function speak(){
      console.log("speak")
    }
	</script>
  </body>
</html>
